<!--
 描述: 司南排名图
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <!-- <div class="sn-title">司南排名图</div>  -->
      <div class="sn-body">
        <div class="wrap-container">
          <div class="pd-main">
            <div id="chart1" class="chart-1">
              <div class="compass">
                <div class="compass-bg-1"></div>
                <div class="compass-bg-2"></div>
                <div class="compass-bg-3"></div>
                <div class="compass-bg-4"></div>
                <div class="compass-bg-5"></div>
                <div class="compass-bg-6"></div>
                <div class="compass-bg-7"></div>

                <div class="compass-bg-c-1"></div>
                <div class="compass-bg-c-2"></div>
                <div class="compass-bg-c-3"></div>
                <div class="compass-bg-c-4"></div>

                <div class="compass-text" :class="[`compass-text-${index + 1}`, { show: number == index }]"
                  v-for="(item, index) in arr" :key="index">
                  <!-- <span>事项数：{{ item.itemNum }}</span>
                  <span>数据项：{{ item.dataItem }}</span> -->
                  <span>数量：{{ item.dataSize }}</span>
                </div>
                <div class="compass-number">
                  <div :title="`${index + 1}`" :class="[`rank-${index + 1}`, { szscale: number == index }]"
                    v-for="(item, index) in arr" :key="index">
                    <span>{{ item.workUnit }}</span>
                  </div>
                </div>

                <div class="line-sx">
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import 'echarts-liquidfill';
import { getsystem } from '@/api/echarts'
export default {
  name: "sinan",
  data() {
    return {
      timer: null,
      number: null,
      arr: [{
        id: 1,
        // itemNum: 258,
        // dataItem: 1288,
        dataSize: 12306,
        workUnit: '已完成'
      }, {
        id: 2,
        // itemNum: 568,
        // dataItem: 5623,
        dataSize: 12306,
        workUnit: '未指派'
      }, {
        id: 3,
        // itemNum: 208,
        // dataItem: 1755,
        dataSize: 12043,
        workUnit: '处理中'
      }, {
        id: 4,
        // itemNum: 358,
        // dataItem: 1812,
        dataSize: 12306,
        workUnit: '待确认'
      }]
    }
  },
  created() {
    getsystem().then(res => {
      console.log(res, '分布图');
      this.arr[0].dataSize = res.msg.complete
      this.arr[1].dataSize = res.msg.unAssign
      this.arr[2].dataSize = res.msg.inHandle
      this.arr[3].dataSize = res.msg.confirm
        ;

      // 调用图表更新方法
      this.getEchartRight2();
    })
  },
  mounted() {
    setTimeout(() => {
      this.number = 0;
      this.initData();
    }, 4000)
  },
  methods: {
    initData() {
      this.number = this.number == this.arr.length ? 0 : this.number;
      this.timer = setTimeout(() => {
        this.number++;
        this.initData();
      }, 5000)
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.sn-container {

  // left: 50px; 
  // top: 110px; 
  bottom: 0;
  .pd-main {
    position: absolute;
    height: 100%;
    width: 100%;

    [class^=chart] {
      position: absolute;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
    }

    .chart-1 {
      width: 30vw;
      height: 43vh;
      top: 15vh;
      left: 45%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .compass {
      width: 100%;
      height: 100%;
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);

      [class^=compass-bg-] {
        position: absolute;
        bottom: 0;
      }

      %compass-bg {
        position: absolute;
        bottom: 0px;
        left: 50%;
        -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
        -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
        transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
      }

      .compass-bg-1 {
        @extend %compass-bg;
        margin-left: -250px;
        bottom: -200px;
        width: 500px;
        height: 500px;
        background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
        background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
        background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
        background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
        display: none;
      }

      .compass-bg-2 {
        @extend %compass-bg;
        margin-left: -220px;
        bottom: -170px;
        width: 440px;
        height: 440px;
        background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
        background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
        background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
        background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
        display: none;
      }

      .compass-bg-3 {
        @extend %compass-bg;
        margin-left: -190px;
        bottom: -140px;
        width: 380px;
        height: 380px;
        background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
        background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
        background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
        background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
      }

      .compass-bg-4 {
        @extend %compass-bg;
        margin-left: -160px;
        bottom: -110px;
        width: 320px;
        height: 320px;
        background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
        background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
        background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
        background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
      }

      // .compass-bg-5 {
      //   @extend %compass-bg;
      //   margin-left: -130px;
      //   bottom: -80px;
      //   width: 260px;
      //   height: 260px;
      //   -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
      //   -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
      //   box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
      // }

      // .compass-bg-6 {
      //   @extend %compass-bg;
      //   margin-left: -100px;
      //   bottom: -50px;
      //   width: 200px;
      //   height: 200px;
      //   background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
      //   background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
      //   background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
      //   background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
      //   display: none;
      // }

      // .compass-bg-7 {
      //   @extend %compass-bg;
      //   margin-left: -70px;
      //   bottom: -20px;
      //   width: 140px;
      //   height: 140px;
      //   background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
      //   background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
      //   background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
      //   background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
      //   -webkit-animation: bgshadow 3s linear infinite;
      //   -moz-animation: bgshadow 3s linear infinite;
      //   -o-animation: bgshadow 3s linear infinite;
      //   animation: bgshadow 3s linear infinite;
      // }

      .compass-bg-c-1 {
        width: 100%;
        height: 100%;
        background: url(../../assets/img/chart1/compass-bg-1.png) no-repeat 50% 345px;
      }

      .compass-bg-c-2 {
        width: 100%;
        height: 100%;
        background: url(../../assets/img/chart1/compass-bg-2.png) no-repeat 65% 146px;
        opacity: 0.8;
        -webkit-animation: fadebg 3s linear infinite;
        -moz-animation: fadebg 3s linear infinite;
        -o-animation: fadebg 3s linear infinite;
        animation: fadebg 3s linear infinite;
      }

      .compass-bg-c-3 {
        width: 100%;
        height: 100%;
        background: url(../../assets/img/chart1/compass-bg-3.png) no-repeat 50% 227px;
      }

      .compass-bg-c-4 {
        width: 100%;
        height: 100%;
        background: url(../../assets/img/chart1/compass-bg-4.png) no-repeat 50% 63px;
        -webkit-animation: numberfade 5s linear infinite;
        -moz-animation: numberfade 5s linear infinite;
        -o-animation: numberfade 5s linear infinite;
        animation: numberfade 5s linear infinite;
      }

      .compass-text {
        position: absolute;
        overflow: hidden;
        // left: 50%;
        margin-left: -40px;
        // margin: auto;
        font-size: 18px;
        background-color: rgba(0, 157, 97, 0.4);
        padding: 5px 5px;
        color: #ffffff;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        line-height: 1.5;
        /*-webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);*/
        display: none;

        &.compass-text-1 {
          top: -6vh;
          left: 4vw;
        }

        &.compass-text-2 {
          top: -20px;
          left: 10vw;
        }

        &.compass-text-3 {
          top: 20px;
          left: 16vw;
        }

        &.compass-text-4 {
          top: 7vh;
          left: 22.5vw;
        }

        // &.compass-text-5 {
        //   top: 88px;
        //   left: 450px;
        // }

        // &.compass-text-6 {
        //   color: #d57a31;
        //   bottom: -945px;
        //   -webkit-animation-delay: 25s;
        //   -moz-animation-delay: 25s;
        //   -o-animation-delay: 25s;
        //   animation-delay: 25s;
        // }

        // &.compass-text-7 {
        //   color: #d57a31;
        //   bottom: -1150px;
        //   -webkit-animation-delay: 30s;
        //   -moz-animation-delay: 30s;
        //   -o-animation-delay: 30s;
        //   animation-delay: 30s;
        // }

        %span-nth-child {
          margin-top: 0px;
        }

        span {
          display: block;

          &:nth-child(1) {
            @extend %span-nth-child;
          }

          &:nth-child(2) {
            @extend %span-nth-child;
          }

          &:nth-child(3) {
            @extend %span-nth-child;
          }
        }

        &.show {
          display: block;
        }
      }

      .compass-number {
        margin-left: 3vw;
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        bottom: 50px;

        >.szscale {
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -ms-transform: scale(1.2);
          -o-transform: scale(1.2);
          transform: scale(1.2);
          -webkit-transform-origin: center bottom;
          -moz-transform-origin: center bottom;
          -ms-transform-origin: center bottom;
          -o-transform-origin: center bottom;
          transform-origin: center bottom;
        }

        >div {
          position: absolute;
          bottom: 0;
          width: 55px;
          height: 0;
          -webkit-animation: sz 1s linear;
          -moz-animation: sz 1s linear;
          -o-animation: sz 1s linear;
          animation: sz 1s linear;
          -webkit-animation-fill-mode: forwards;
          -moz-animation-fill-mode: forwards;
          -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
          -webkit-transition: 1s;
          -o-transition: 1s;
          -moz-transition: 1s;
          transition: 1s;

          &:nth-child(1) {
            left: 5%;
            color: #ff9232;
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            -o-animation-delay: 0s;
            animation-delay: 0s;

            &:after {
              -webkit-animation-delay: 0s;
              -moz-animation-delay: 0s;
              -o-animation-delay: 0s;
              animation-delay: 0s;
            }
          }

          &:nth-child(2) {
            left: 25%;
            color: #d5c245;
            -webkit-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            -o-animation-delay: 0.2s;
            animation-delay: 0.2s;
            bottom: -10%;

            &:after {
              -webkit-animation-delay: 2.85s;
              -moz-animation-delay: 2.85s;
              -o-animation-delay: 2.85s;
              animation-delay: 2.85s;
            }
          }

          &:nth-child(3) {
            left: 45%;
            color: #01a455;
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
            -o-animation-delay: 0.4s;
            animation-delay: 0.4s;
            bottom: -20%;

            &:after {
              -webkit-animation-delay: 5.7s;
              -moz-animation-delay: 5.7s;
              -o-animation-delay: 5.7s;
              animation-delay: 5.7s;
            }
          }

          &:nth-child(4) {
            left: 65%;
            color: #85adfb;
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            -o-animation-delay: 0.6s;
            animation-delay: 0.6s;
            bottom: -30%;

            &:after {
              -webkit-animation-delay: 8.55s;
              -moz-animation-delay: 8.55s;
              -o-animation-delay: 8.55s;
              animation-delay: 8.55s;
            }
          }

          &:nth-child(5) {
            left: 85%;
            color: #c36885;
            -webkit-animation-delay: 0.8s;
            -moz-animation-delay: 0.8s;
            -o-animation-delay: 0.8s;
            animation-delay: 0.8s;
            bottom: -40%;

            &:after {
              -webkit-animation-delay: 11.4s;
              -moz-animation-delay: 11.4s;
              -o-animation-delay: 11.4s;
              animation-delay: 11.4s;
            }
          }

          &:nth-child(6) {
            left: 75%;
            color: #f674a0;
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
            bottom: -50%;

            &:after {
              -webkit-animation-delay: 14.25s;
              -moz-animation-delay: 14.25s;
              -o-animation-delay: 14.25s;
              animation-delay: 14.25s;
            }
          }

          &:nth-child(7) {
            left: 87.5%;
            color: #275fcc;
            -webkit-animation-delay: 1.2s;
            -moz-animation-delay: 1.2s;
            -o-animation-delay: 1.2s;
            animation-delay: 1.2s;
            bottom: -60%;

            &:after {
              -webkit-animation-delay: 17.1s;
              -moz-animation-delay: 17.1s;
              -o-animation-delay: 17.1s;
              animation-delay: 17.1s;
            }
          }

          span {
            display: block;
            width: 55px;
            height: 55px;
            line-height: 55px;
            text-align: center;
            /*padding-bottom: 55px;*/
            -webkit-box-shadow: inset 0 0 15px currentColor;
            -moz-box-shadow: inset 0 0 15px currentColor;
            box-shadow: inset 0 0 15px currentColor;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
          }

          &:before {
            content: "";
            position: absolute;
            height: 100%;
            border-left: 1px dashed currentColor;
            height: 500px;
            top: 55px;
            left: 50%;
            margin-left: -1px;
          }

          &:after {
            content: "NO." attr(title);
            position: absolute;
            display: inline-block;
            top: -20px;
            width: 100%;
            font-family: "DIGITALDREAMFAT";
            text-align: center;
          }
        }
      }

      .line-sx {
        >div {
          &:nth-child(2) {
            height: 90%;
            -webkit-animation-duration: 2s;
            -moz-animation-duration: 2s;
            -o-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-delay: 1.5s;
            -moz-animation-delay: 1.5s;
            -o-animation-delay: 1.5s;
            animation-delay: 1.5s;
            bottom: 0;
            left: 51px;
          }

          &:nth-child(3) {
            height: 100%;
            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            -o-animation-delay: 0s;
            animation-delay: 0s;
            bottom: 32px;
            left: 89px;
          }

          &:nth-child(4) {
            height: 100%;
            -webkit-animation-duration: 2.5s;
            -moz-animation-duration: 2.5s;
            -o-animation-duration: 2.5s;
            animation-duration: 2.5s;
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
            bottom: 3px;
            left: 179px;
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
          }

          &:nth-child(5) {
            height: 90%;
            -webkit-animation-duration: 2s;
            -moz-animation-duration: 2s;
            -o-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-delay: 2s;
            -moz-animation-delay: 2s;
            -o-animation-delay: 2s;
            animation-delay: 2s;
            bottom: 42px;
            left: 229px;
          }

          &:nth-child(6) {
            height: 100%;
            -webkit-animation-duration: 2.5s;
            -moz-animation-duration: 2.5s;
            -o-animation-duration: 2.5s;
            animation-duration: 2.5s;
            -webkit-animation-delay: 0.5s;
            -moz-animation-delay: 0.5s;
            -o-animation-delay: 0.5s;
            animation-delay: 0.5s;
            bottom: 11px;
            right: 48px;
          }

          &:nth-child(7) {
            height: 90%;
            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-delay: 2.5s;
            -moz-animation-delay: 2.5s;
            -o-animation-delay: 2.5s;
            animation-delay: 2.5s;
            bottom: -22px;
            right: 174px;
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
          }

          &:nth-child(8) {
            height: 90%;
            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-delay: 1.5s;
            -moz-animation-delay: 1.5s;
            -o-animation-delay: 1.5s;
            animation-delay: 1.5s;
            bottom: -22px;
            right: 100px;
          }

          &:nth-child(9) {
            height: 100%;
            -webkit-animation-duration: 2.5s;
            -moz-animation-duration: 2.5s;
            -o-animation-duration: 2.5s;
            animation-duration: 2.5s;
            -webkit-animation-delay: 2s;
            -moz-animation-delay: 2s;
            -o-animation-delay: 2s;
            animation-delay: 2s;
            bottom: -10px;
            right: 220px;
          }

          &:nth-child(10) {
            height: 95%;
            -webkit-animation-duration: 2s;
            -moz-animation-duration: 2s;
            -o-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
            bottom: -41px;
            right: 182px;
          }
        }

        .line-fs {
          width: 14px;
          height: 100%;
          background: url(../../assets/img/chart1/line-fs.png) no-repeat;
          background-position: 50% 150%;
          position: absolute;
          z-index: -1;
          -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
          -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
          -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
          animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
        }
      }

    }

  }
}


@-webkit-keyframes fs {
  0% {
    background-position: 50% 150%;
  }

  50% {
    background-position: 50% -132%;
  }

  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@-moz-keyframes fs {
  0% {
    background-position: 50% 150%;
  }

  50% {
    background-position: 50% -132%;
  }

  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@-o-keyframes fs {
  0% {
    background-position: 50% 150%;
  }

  50% {
    background-position: 50% -132%;
  }

  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@keyframes fs {
  0% {
    background-position: 50% 150%;
  }

  50% {
    background-position: 50% -132%;
  }

  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@-webkit-keyframes bgshadow {

  0%,
  100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    -webkit-box-shadow: 0 0 30em white;
    box-shadow: 0 0 30em white;
  }
}

@-moz-keyframes bgshadow {

  0%,
  100% {
    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    -moz-box-shadow: 0 0 30em white;
    box-shadow: 0 0 30em white;
  }
}

@-o-keyframes bgshadow {

  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 0 0 30em white;
  }
}

@keyframes bgshadow {

  0%,
  100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    -webkit-box-shadow: 0 0 30em white;
    -moz-box-shadow: 0 0 30em white;
    box-shadow: 0 0 30em white;
  }
}


@-webkit-keyframes sz {
  0% {
    height: 0;
  }

  100% {
    height: 70%;
  }
}

@-moz-keyframes sz {
  0% {
    height: 0;
  }

  100% {
    height: 70%;
  }
}

@-o-keyframes sz {
  0% {
    height: 0;
  }

  100% {
    height: 70%;
  }
}

@keyframes sz {
  0% {
    height: 0;
  }

  100% {
    height: 70%;
  }
}
</style>
